<template>
  <div class="home">
    <Screen theme="#11c582">
      <template #content>
        <canvas canvas-id="canvasId" id="earth-canvas"></canvas>
      </template>
    </Screen>
  </div>
</template>

<script lang="ts" setup>
import Screen from "@/components/Screen"; // @ is an alias to /src
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import dq from "./diqiu.jpg";
import { onMounted, ref } from "vue";
import { BufferGeometry, LineBasicMaterial, LineSegments, Vector3 } from "three";
import chinaMapData from "./chinaMapData";

// async function chinaMapData() {
//   // https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
//   const response = await fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json");
//   return response;
// }
function initEarth() {
  // 获取canvas元素
  const canvas = document.getElementById("earth-canvas");

  // 创建场景
  const scene = new THREE.Scene();
  // 设置透明背景
  scene.background = null;

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({
    canvas: canvas, // 使用已有的canvas元素
    antialias: true, // 启用抗锯齿
    alpha: true, // 关键：启用透明度
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio); // 设置像素比例

  // 创建相机
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;
  // 控制器
  const controls = new OrbitControls(camera, canvas);
  // 停止动画
  controls.autoRotate = false;
  controls.update();
  // 创建纹理加载器
  const textureLoader = new THREE.TextureLoader();
  const earthTexture = textureLoader.load(dq);
  // 创建球体几何体和材质
  const globeGeometry = new THREE.SphereGeometry(2, 100, 100); // 创建几何球体
  const globeMaterial = new THREE.MeshBasicMaterial({
    map: earthTexture, // 使用加载的纹理
  });
  // 创建球体网格
  const globeMesh = new THREE.Mesh(globeGeometry, globeMaterial);
  scene.add(globeMesh);

  // 创建粒子系统（流动光效）
  // const particleCount = 80;
  // const particleGeometry = new THREE.BufferGeometry();
  // const positions = new Float32Array(particleCount * 3);
  // const colors = new Float32Array(particleCount * 3);
  // for (let i = 0; i < particleCount; i++) {
  //   // 随机球面坐标
  //   const phi = Math.acos(-1 + (2 * i) / particleCount);
  //   const theta = Math.sqrt(particleCount * Math.PI) * phi;

  //   positions[i * 3] = 2.2 * Math.cos(theta) * Math.sin(phi); // 略大于球体半径
  //   positions[i * 3 + 1] = 2.2 * Math.sin(theta) * Math.sin(phi);
  //   positions[i * 3 + 2] = 2.2 * Math.cos(phi);

  //   // 渐变颜色（蓝紫渐变）
  //   colors[i * 3] = 0.5 + 0.8 * Math.sin(phi); // R 红色通道，值在 0.5 到 1.0 之间变化，形成渐变效果
  //   colors[i * 3 + 1] = 0.5 + 1 * Math.sin(phi); // G 绿色通道，值在 0.5 到 1.0 之间变化，形成渐变效果
  //   colors[i * 3 + 2] = 0.4; // B 蓝色通道，固定值为 0.2
  // }

  // particleGeometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
  // particleGeometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

  // const particleMaterial = new THREE.PointsMaterial({
  //   size: 0.02,
  //   vertexColors: true,
  //   transparent: true,
  //   opacity: 0.5,
  // });

  // const particles = new THREE.Points(particleGeometry, particleMaterial);
  // scene.add(particles);

  // 添加点光源
  const pointLight = new THREE.PointLight(0xffffff);
  pointLight.position.set(5, 5, 5);
  scene.add(pointLight);
  // 动画函数
  let angle = 0;
  function animate() {
    requestAnimationFrame(animate);

    // // 更新粒子位置，使它们围绕地球旋转
    // for (let i = 0; i < particleCount; i++) {
    //   const phi = Math.acos(-1 + (2 * i) / particleCount);
    //   const theta = Math.sqrt(particleCount * Math.PI) * phi + angle;

    //   positions[i * 3] = 2.2 * Math.cos(theta) * Math.sin(phi);
    //   positions[i * 3 + 1] = 2.2 * Math.sin(theta) * Math.sin(phi);
    //   positions[i * 3 + 2] = 2.2 * Math.cos(phi);
    // }
    // particleGeometry.attributes.position.needsUpdate = true;

    // globeMesh.rotation.y += 0.01;
    // angle += 0.005; // 控制粒子旋转速度
    renderer.render(scene, camera); // 每帧渲染
  }

  // 开始动画
  animate();

  // 窗口大小变化时调整
  window.addEventListener("resize", () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
}

onMounted(() => {
  initEarth();
});
</script>

<style scoped lang="scss">
#earth-canvas {
  width: 100%;
  height: 100%;
}
</style>
